<template>
	<div class="bar">
		<div class="bar-item icon-list">
			<el-tooltip class="item" effect="dark" content="初始化" placement="bottom">
				<el-button name="init" class="" size="small" icon="el-icon-document-add" @click="handleClick"> </el-button>
			</el-tooltip>
			<!-- <el-tooltip
        class="item"
        effect="dark"
        content="清除 (Cmd + D)"
        placement="bottom"
      >
        <el-button
          name="delete"
          class="el-icon-delete"
          size="small"
          icon="delete"
          @click="handleClick"
        >
        </el-button>
      </el-tooltip> -->

			<!-- :disabled="!isCanUse.canUndo" -->
			<el-tooltip class="item" effect="dark" content="撤销 (Cmd + Z)" placement="bottom">
				<el-button name="undo" class="el-icon-refresh-left" size="small" icon="undo" @click="handleClick"> </el-button>
			</el-tooltip>

			<!-- :disabled="!isCanUse.canRedo" -->
			<el-tooltip class="item" effect="dark" content="重做 (Cmd + Shift + Z)" placement="bottom">
				<el-button name="redo" class="el-icon-refresh-right" size="small" icon="redo" @click="handleClick"> </el-button>
			</el-tooltip>

			<!-- :disabled="!isCanUse.canCopy" -->
			<el-tooltip class="item" effect="dark" content="复制 (Cmd + C)" placement="bottom">
				<el-button name="copy" class="el-icon-document-copy" size="small" icon="copy" @click="handleClick"> </el-button>
			</el-tooltip>

			<!-- :disabled="!isCanUse.canCut" -->
			<el-tooltip class="item" effect="dark" content="剪切 (Cmd + X)" placement="bottom">
				<el-button name="cut" class="el-icon-scissors" size="small" icon="scissor" @click="handleClick"> </el-button>
			</el-tooltip>

			<!-- :disabled="!isCanUse.canPaste" -->
			<el-tooltip class="item" effect="dark" content="粘贴 (Cmd + V)" placement="bottom">
				<el-button name="paste" class="el-icon-copy-document" size="small" @click="handleClick"> </el-button>
			</el-tooltip>

			<el-tooltip class="item" effect="dark" content="保存PNG (Cmd + S)" placement="bottom">
				<el-button name="savePNG" class="el-icon-download" size="small" icon="download" @click="handleClick">
				</el-button>
			</el-tooltip>

			<el-tooltip class="item" effect="dark" content="打印 (Cmd + P)" placement="bottom">
				<el-button name="print" class="el-icon-printer" size="small" @click="handleClick"> </el-button>
			</el-tooltip>

			<el-tooltip class="item" effect="dark" content="保存" placement="bottom">
				<!-- <el-button name="print" class="el-icon-printer" size="small" @click="handleClick"> </el-button> -->
				<!-- <img src="~@/assets/img/graph-handle-btn9.png" name="save" alt="" /> -->
				<el-button name="save" class="btn-save" type="primary" plain @click="handleSave">
					<img src="~@/assets/img/graph-handle-btn9.png" alt="" />
				</el-button>
			</el-tooltip>
		</div>
		<!-- <div class="bar-item btn-list">
			<el-button class="btn-save" type="primary" plain @click="handleSave">保 存</el-button>
			<el-button class="btn-cancel" type="primary" plain @click="handleBack">取消</el-button>
		</div> -->
	</div>
</template>

<script>
// import DagGraph from "../../graph";
// import DagGraph from "@/views/dag/dagEdit/graph";
import { mapState } from "vuex";
import { DataUri } from "@antv/x6";
// let graph = null;
export default {
	name: "ToolBar",
	components: {},
	props: {
		currentSelect: {
			type: String,
			default: "none",
		},
	},
	computed: mapState({
		graph: (state) => state.dagStore.graph,
	}),
	data() {
		return {
			isCanUse: {
				canUndo: "",
				canRedo: "",
				canCopy: "",
				canCut: "",
				canPaste: "",
				graph: "",
			},
		};
	},
	watch: {
		currentSelect(val) {
			let bol = val !== "none";
			this.isCanUse.canCopy = bol;
			this.isCanUse.canCut = bol;
			if (!bol) {
				this.isCanUse.canPaste = bol;
			}
		},
	},
	mounted() {
		setTimeout(() => {
			// graph = DagGraph?.graph;
			// graph = DagGraph;
			console.log("graph: ", this.graph);
			this.initEvent();
		}, 200);
	},
	methods: {
		initEvent() {
			const { history } = this.graph;
			history.on("change", () => {
				this.isCanUse.canUndo = history.canUndo();
				this.isCanUse.canRedo = history.canRedo();
			});
			this.graph.enableHistory();

			this.graph.bindKey("ctrl+z", () => {
				if (history.canUndo()) {
					history.undo();
				}
				return false;
			});
			this.graph.bindKey("ctrl+shift+z", () => {
				if (history.canRedo()) {
					history.redo();
				}
				return false;
			});
			this.graph.bindKey("ctrl+d", () => {
				this.graph.clearCells();
				return false;
			});
			this.graph.bindKey("ctrl+s", () => {
				this.graph.toPNG((datauri) => {
					DataUri.downloadDataUri(datauri, "chart.png");
				});
				return false;
			});
			this.graph.bindKey("ctrl+p", () => {
				this.graph.printPreview();
				return false;
			});
			this.graph.bindKey("ctrl+c", this.copy);
			this.graph.bindKey("ctrl+v", this.paste);
			this.graph.bindKey("ctrl+x", this.cut);
		},
		undo() {
			this.graph.history.undo();
		},
		redo() {
			this.graph.history.redo();
		},
		copy() {
			const cells = this.graph.getSelectedCells();
			if (cells.length) {
				this.graph.copy(cells);
				this.isCanUse.canPaste = true;
			}
			return false;
		},
		cut() {
			const cells = this.graph.getSelectedCells();
			if (cells.length) {
				this.graph.cut(cells);
				this.isCanUse.canPaste = true;
			}
			return false;
		},
		paste() {
			if (!this.graph.isClipboardEmpty()) {
				const cells = this.graph.paste({ offset: 32 });
				this.graph.cleanSelection();
				this.graph.select(cells);
			}
			return false;
		},
		handleClick(event) {
			const name = event.currentTarget.name;
			switch (name) {
				case "init":
					this.initGraph();
					break;
				case "undo":
					this.undo();
					break;
				case "redo":
					this.redo();
					break;
				case "delete":
					this.graph.clearCells();
					break;
				case "savePNG":
					this.graph.toPNG(
						(dataUri) => {
							// 下载
							DataUri.downloadDataUri(dataUri, "chartx.png");
						},
						{
							backgroundColor: "white",
							padding: {
								top: 20,
								right: 30,
								bottom: 40,
								left: 50,
							},
							quality: 1,
						}
					);
					break;
				case "print":
					this.graph.printPreview();
					break;
				case "copy":
					this.copy();
					break;
				case "cut":
					this.cut();
					break;
				case "paste":
					this.paste();
					break;
				case "save":
					this.$emit("saveStrategy");
					break;
				default:
					break;
			}
		},
		initGraph() {
			this.graph.clearCells();
			this.graph.center(); // 内容居中
			this.graph.zoomTo(1); // 缩放比例
			const start_node = this.graph.createNode({
				shape: "start",
				x: 100,
				y: 300,
			});
			this.graph.addNode(start_node);
		},
		handleBack() {
			this.$emit("backTo");
		},
		handleSave() {
			console.log("save");
			this.$emit("saveStrategy");
		},
	},
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
